<script setup>
import { queryOperateDescByType } from '@/api/painting'
import { onMounted, ref } from 'vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: true
    },
    type: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
    }
})
const emit = defineEmits(['update:modelValue'])

const textList = ref([])
const tasCurrent = ref(0)


function showFn() {
    const typeList = {
        8: 'expansionPictureBootPopup',
        11: 'instructDrawBootPopup',
        12: 'bgRedrawingBootPopup',
        13: 'imgCreateTextBootPopup'
    }
    if (!uni.getStorageSync(typeList[props.type])) {
        setTimeout(() => {
            emit('update:modelValue', true)
            uni.setStorageSync(typeList[props.type], true)
        }, 700);
    }
}


async function queryOperateDescByTypeFn() {
    const res = await queryOperateDescByType(props.type)

    res.data.forEach(item => {
        if (item?.imagesUrl) {
            item.imagesUrl = item?.imagesUrl?.split(',')
        }
    })
    const categorizedData = [];

    res.data.forEach(item => {
        const category = item.categroy || 'default';
        let categoryGroup = categorizedData.find(group => group.category === category);
        if (!categoryGroup) {
            categoryGroup = { category, items: [] };
            categorizedData.push(categoryGroup);
        }
        categoryGroup.items.push(item);
    });
    textList.value = categorizedData
}



function onClose() {
    emit('update:modelValue', false)
}


onMounted(() => {
    queryOperateDescByTypeFn().then(() => {
        showFn()
    })
})

const customStyle = `background-color: var(--a-adapter-bg-color)`
</script>

<template>
    <van-popup :show="modelValue" round="16" position="bottom" closeable @close="onClose" :custom-style="customStyle">
        <div class="bootPopup">
            <div class="title">{{ title }}玩法</div>
            <div class="tabs" v-if="textList[0]?.category !== 'default'">
                <div class="tab" :class="{ active: tasCurrent === index }" v-for="item, index of textList"
                    @click="tasCurrent = index">
                    {{ item?.category }}
                </div>
            </div>
            <div class="content">
                <div class="placeholder" v-if="placeholder">{{ placeholder }}</div>
                <div class="content_item" v-for="item, index of textList[tasCurrent]?.items">
                    <div class="content_title">{{ index + 1 }}、{{ item?.title }}</div>
                    <div class="content_label" v-if="item?.description">{{ item?.description }}</div>
                    <div class="img_list">
                        <img :src="subItem" class="img_item" mode="aspectFill" alt="" v-for="subItem of item?.imagesUrl">
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<style lang='scss' scoped>
.bootPopup {
    box-sizing: border-box;
    max-height: 65vh;
    padding: 30rpx 30rpx 0;
    display: flex;
    flex-direction: column;

    .title {
        font-weight: bold;
        font-size: 36rpx;
        color: var(--a-one-text-color);
        text-align: center;
    }

    .tabs {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top: 31rpx;

        .tab {
            font-weight: bold;
            font-size: 34rpx;
            color: var(--a-one-text-color);

            &.active {
                color: var(--a-main-color);
            }
        }
    }

    .content {
        flex: 1;
        overflow: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        .placeholder {
            font-size: 26rpx;
            color: var(--a-two-text-color);
            line-height: 30rpx;
            margin-top: 30rpx;
        }

        .content_item {
            margin-top: 40rpx;

            .content_title {
                font-size: 32rpx;
                color: var(--a-one-text-color);

                .text {
                    font-size: 24rpx;
                }
            }

            .content_label {
                color: #D5D4DF;
                font-size: 26rpx;
                margin-top: 16rpx;
            }

            .img_list {
                margin-top: 20rpx;
                display: grid;
                grid-template-columns: repeat(2, 246rpx);
                gap: 32rpx;
                justify-content: center;

                .img_item {
                    width: 100%;
                    height: 189rpx;
                    border-radius: 15rpx;
                }
            }
        }
    }
}
</style>